<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap 实例 - 响应式实用工具</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
<style>
  .PcImg{
        width: 100%;
        height: 410px;
        display: block;
        background-position: center center;
        /* 图片的高度可能和父容器的高度不一致  用cover来填充 */
        background-size: cover;
    }
   .mobileImg{
     width: 100%;
     display: block;
   }
   .mobileImg > img{
     width: 100%;
     display: block;
   }
</style>
</head>
<body>
  <!-- 头部块 -->
<header class="wjs_header hidden-xs hidden-sm">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <a href="javascript:;" class="wjs_code">
                    <span class="glyphicon glyphicon-phone"></span>
                    <span>手机微金所</span>
                    <span class="glyphicon glyphicon-chevron-down"></span>
                    <img src="./img/code.png" width="100px" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <span class="glyphicon glyphicon-phone-alt"></span>
                <a href="javascript:;">4006-89-4006(服务时间 balabala) 联系在线客服</a>
            </div>
            <div class="col-md-2">
                <a href="javascritp:;">常见问题</a>&nbsp;&nbsp;
                <a href="javascritp:;">财富登录</a>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-danger">免费注册</button>&nbsp;&nbsp;
                <a href="javascript:;">登录</a>
            </div>
        </div>
    </div>
</header>
<!-- 导航图 -->
<nav class="wjs_nav navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
  
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav hidden-sm">
          <li class="active"><a href="#">我要投资 <span class="sr-only">(current)</span></a></li>
          <li><a href="#">我要借贷</a></li>
          <li><a href="#">平台介绍</a></li>
          <li><a href="#">新手专区</a></li>
          <li><a href="#">最新动态</a></li>
          <li><a href="#">微平台</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">个人中心</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
      <div class="item active" data-large-image="./img/banner1.png" data-small-image="./img/banner1_m.png">
      </div>
      <div class="item" data-large-image="./img/banner2.png" data-small-image="./img/banner2_m.png">  
      </div>
      <div class="item" data-large-image="./img/banner3.png" data-small-image="./img/banner3_m.png">   
      </div>
      <div class="item" data-large-image="./img/banner4.png" data-small-image="./img/banner4_m.png">
      </div>
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>


</body>
</html>